<template>
    <div class="account-settings-info-view">
        <a-row :gutter="16">
            <a-col :md="24" :lg="16">
                <a-form layout="vertical" :form="form">
                    <a-form-item label="头像">
                        <j-image-upload :value="avatar" class="avatar-uploader" @change="changeAvatar"></j-image-upload>
                    </a-form-item>

                    <a-form-item label="昵称">
                        <a-input placeholder="给自己起个名字" v-decorator.trim="['realname',rules.realname]"/>
                    </a-form-item>

                    <a-form-item label="邮箱">
                        <a-input placeholder="请输入邮箱" v-decorator="['email',rules.email]"/>
                    </a-form-item>

                    <a-form-item label="性别">
                        <a-select v-decorator="[ 'sex']" placeholder="请选择性别"
                                  :getPopupContainer="(target) => target.parentNode">
                            <a-select-option :value="1">男</a-select-option>
                            <a-select-option :value="2">女</a-select-option>
                        </a-select>
                    </a-form-item>

                    <a-form-item label="生日">
                        <a-date-picker
                                style="width: 100%"
                                placeholder="请选择生日"
                                v-decorator="['birthday', rules.birthday]"
                                :getCalendarContainer="node => node.parentNode"/>
                    </a-form-item>

                    <a-form-item label="座机号码">
                        <a-input placeholder="请输入座机号码" v-decorator="['telephone', rules.telephone]"/>
                    </a-form-item>

                    <a-form-item>
                        <a-button type="primary" @click.stop.prevent="submitUserInfo" :loading="loading" >保存并提交</a-button>
<!--                        <a-button style="margin-left: 8px">重置</a-button>-->
                    </a-form-item>
                </a-form>
            </a-col>
            <a-col :md="24" :lg="8"></a-col>
        </a-row>
    </div>
</template>

<script>

  /**
   * 修改用户基本信息
   */
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  import { duplicateCheck } from '@/api/api'
  import { editCurrUserInfo } from '@/api/user'
  import { USER_INFO } from '@/store/mutation-types'
  import JImageUpload from '@/components/jeecg/JImageUpload'

  export default {
    components: {
      JImageUpload
    },
    data() {
      // 验证邮箱
      let validateEmail = (rule, value, callback) => {
        if (!value) {
          callback()
        } else {
          let reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
          if (new RegExp(reg).test(value)) {
            // let params = {
            //   tableName: 'sys_user',
            //   fieldName: 'email',
            //   fieldVal: value,
            //   dataId: this.userId
            // }
            // duplicateCheck(params).then((res) => {
            //   if (res.success) {
            //     callback()
            //   } else {
            //     callback('邮箱已存在!')
            //   }
            // })
            callback()
          } else {
            callback('请输入正确格式的邮箱!')
          }
        }
      }

      let rules = {
        realname: {},
        email: { rules: [{ validator: validateEmail }] },
        birthday: {},
        telephone: {}
      }
      return {
        form: this.$form.createForm(this),
        rules,
        avatar : '',
        loading : false
      }
    },
    mounted() {
      const userInfo = this.userInfo()
      if(userInfo){
        this.form.setFieldsValue({
          realname : userInfo ? userInfo.realname : '',
          email : userInfo ? userInfo.email : '',
          telephone : userInfo ? userInfo.telephone : '',
          sex : userInfo ? userInfo.sex : undefined,
          birthday : userInfo.birthday? moment(userInfo.birthday,'YYYY-MM-DD') : null,
        });
        this.avatar = userInfo.avatar;
      }
    },
    methods: {
      ...mapGetters(['userInfo']),
      moment,
      changeAvatar: function(path){
        console.log('avatar ==> ',path)
        this.avatar = path;
      },
      // 提交用户信息
      submitUserInfo: async function(e) {
        e.preventDefault()
        this.loading = true;
        // 触发表单验证
        let verify = await this.form.validateFields();
        if(verify.errors){
          this.loading = false;
          return ;
        }
        let data = {
          avatar: this.avatar,
          birthday: verify.birthday,
          email: verify.email,
          telephone: verify.telephone,
          realName: verify.realname,
          sex: verify.sex
        }
        let res = await editCurrUserInfo(data);
        this.loading = false;
        let userInfo = this.userInfo();
        if(res && res.success && userInfo){
          userInfo['avatar'] = data['avatar'];
          userInfo['birthday'] = data['birthday'];
          userInfo['email'] = data['email'];
          userInfo['telephone'] = data['telephone'];
          userInfo['realName'] = data['realName'];
          userInfo['sex'] = data['sex'];
          Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000);
        }
      }
    }
  }
</script>

<style lang="less" scoped>

    .avatar-upload-wrapper {
        height: 200px;
        width: 100%;
    }

    .ant-upload-preview {
        position: relative;
        margin: 0 auto;
        width: 100%;
        max-width: 180px;
        border-radius: 50%;
        box-shadow: 0 0 4px #ccc;

        .upload-icon {
            position: absolute;
            top: 0;
            right: 10px;
            font-size: 1.4rem;
            padding: 0.5rem;
            background: rgba(222, 221, 221, 0.7);
            border-radius: 50%;
            border: 1px solid rgba(0, 0, 0, 0.2);
        }

        .mask {
            opacity: 0;
            position: absolute;
            background: rgba(0, 0, 0, 0.4);
            cursor: pointer;
            transition: opacity 0.4s;

            &:hover {
                opacity: 1;
            }

            i {
                font-size: 2rem;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -1rem;
                margin-top: -1rem;
                color: #d6d6d6;
            }
        }

        img, .mask {
            width: 100%;
            max-width: 180px;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
        }
    }
</style>
